@import 'var';
@import './mixins/text-overflow';
/*
* margin/padding
*/
@spacing-width: 4px;
.spacing-size(auto, auto, e('margin'), e('m')) !important; // auto
.spacing-size(0, 0, e('margin'), e('m')) !important; // 0

each(range(16),.(@v,@k){
  @key: @k;
  @n-key: ~'n@{key}';
  @value: @v * @spacing-width;
  @n-value: 0 - @value;

  .spacing-size(@key, @value, e('margin'), e('m')) !important;
  .spacing-size(@n-key, @n-value, e('margin'), e('m')) !important;
}); // 1-16/-1--16

.spacing-size(0, 0, e('padding'), e('p')) !important; // 0

each(range(16),.(@v,@k){
  @key: @k;
  @value: @v * @spacing-width;

  .spacing-size(@key, @value, e('padding'), e('p')) !important;
}); // 1-16

.spacing-size(@key,@value,@property,@short-property) {
  .@{short-property}a-@{key} {
    @{property}: @value;
  }

  .@{short-property}x-@{key} {
    @{property}-left: @value;
    @{property}-right: @value;
  }

  .@{short-property}y-@{key} {
    @{property}-top: @value;
    @{property}-bottom: @value;
  }

  .@{short-property}t-@{key} {
    @{property}-top: @value;
  }

  .@{short-property}r-@{key} {
    @{property}-right: @value;
  }

  .@{short-property}b-@{key} {
    @{property}-bottom: @value;
  }

  .@{short-property}l-@{key} {
    @{property}-left: @value;
  }
}

/*
* border-radius
*/
@rounded: {
  0: 0;
  sm: @border-radius-sm;
  md: @border-radius-md;
  md-l: @border-radius-md-l;
  lg: @border-radius-lg;
  xl: @border-radius-xl;
  pill: @border-radius-max;
  circle: 50%;
};

each(@rounded,{
  .rounded-size(@key,@value) !important;
});

.rounded-size(@key,@value) {
  .rounded-@{key} {
    border-radius: @value;
  }

  .rounded-t-@{key} {
    border-top-left-radius: @value;
    border-top-right-radius: @value;
  }

  .rounded-r-@{key} {
    border-top-right-radius: @value;
    border-bottom-right-radius: @value;
  }

  .rounded-b-@{key} {
    border-bottom-left-radius: @value;
    border-bottom-right-radius: @value;
  }

  .rounded-l-@{key} {
    border-top-left-radius: @value;
    border-bottom-left-radius: @value;
  }

  .rounded-tl-@{key} {
    border-top-left-radius: @value;
  }

  .rounded-tr-@{key} {
    border-top-right-radius: @value;
  }

  .rounded-bl-@{key} {
    border-bottom-left-radius: @value;
  }

  .rounded-br-@{key} {
    border-bottom-right-radius: @value;
  }
}

/*
* float
*/
.float-align(left) !important;
.float-align(right) !important;
.float-align(none) !important;

.float-align(@direction) {
  .float-@{direction} {
    float: @direction;
  }
}

/*
* text
*/
.text-align(left) !important;
.text-align(center) !important;
.text-align(right) !important;
.text-align(justify) !important;

.text-align(@direction) {
  .text-@{direction} {
    text-align: @direction;
  }
}

@font-sizes: {
  xs: @font-size-xs;
  sm: @font-size-sm;
  md: @font-size-md;
  lg: @font-size-lg;
  xl: @font-size-xl;
  xxl: @font-size-xxl;
  xxxl: @font-size-xxxl;
};

@line-heights: {
  xs: @line-height-xs;
  sm: @line-height-sm;
  md: @line-height-md;
  lg: @line-height-lg;
  xl: @line-height-xl;
  xxl: @line-height-xxl;
  xxxl: @line-height-xxxl;
};

each(@font-sizes,{
  .font-size(@key, @value) !important;
  .font(@key,@value, @line-heights[$@key]) !important;
});

each(@line-heights,{
  .line-height(@key, @value) !important;
});

.font-size(@key,@value) {
  .font-size-@{key} {
    font-size: @value;
  }
}

.line-height(@key,@value) {
  .line-height-@{key} {
    line-height: @value;
  }
}

// 上面两种的组合
.font(@key,@fontSize,@lineHeight){
  .font-@{key}{
    font-size: @fontSize;
    line-height: @lineHeight;
  }
}

@font-weights: {
  black: @font-weight-black;
  bold: @font-weight-bold;
  medium: @font-weight-medium;
  regular: @font-weight-regular;
  light: @font-weight-light;
  thin: @font-weight-thin;
};

each(@font-weights,{
  .font-weight(@key, @value) !important;
});

.font-weight(@key,@value) {
  .font-weight-@{key} {
    font-weight: @value;
  }
}

.font-italic {
  font-style: italic !important;
}

.font-normal {
  font-style: normal !important;
}

.d-block{
  display: block;
}

.d-inline{
  display: inline;
}

.d-inline-block{
  display: inline-block;
}

.d-flex {
  display: flex;
}

.d-flex-inline {
  display: inline-flex;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column {
  flex-direction: column;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex-none {
  flex: none;
}

.flex-auto {
  flex: 1 1 auto; // ie bug
}

.flex-warp{
  flex-wrap: wrap;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-center-main {
  justify-content: center
}

.flex-center-cross {
  align-items: center;
}

.flex-align-between {
  justify-content: space-between;
}

.flex-align-start {
  justify-content: flex-start;
}

.flex-align-end {
  justify-content: flex-end;
}

.text-ellipsis {
  .textOverflow();
}

.text-ellipsis-l2 {
  .textOverflowMulti(2);
}
